<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery/jquery.js'>
</script>
<script type='text/javascript' src='jquery/ui.core.js'></script>
<script type='text/javascript' src='jquery/ui.draggable.js'></script>
<script type='text/javascript' src='jquery/ui.resizable.js'></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script language = "javascript" script type=”text/javascript” src=”http://traumacenter.planetnorman.net/traumacentercalendar/FullCalendar/json-events.php”></script>
<script type='text/javascript'>
</script>
<script type='text/javascript'>
	function Close()
	{
	
		var popup = document.getElementById("overlay");
		popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";
	}
	
	function Save()
	{
		
	
		// edit event
		if(document.getElemetByID('eventId').value > 0)
		{
			
		}
		// new event
		else
		{
			
		}
	}

	$(document).ready(function() {
		$(function(){$.ajaxSetup({async: false});
		});	

		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		var events_array = "";

		$(function(){$.get("json-events.php", function(data){
			events_array = data;
		});
		});

		alert(events_array);

		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,basicWeek,basicDay'
			},
			editable: true,
			events: events_array ,
			
			eventClick: function(event, element) 
			{
				var popup = document.getElementById("overlay");
				popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";
				document.getElementById("title").value = event.title;
				document.getElementById("start").value = event.start;
				document.getElementById("eventId").value = event.id;
				
			},	
	
			
			dayClick: function(date) 
			{
				//$('#calendar').fullCalendar('gotoDate', date);
				//$('#calendar').fullCalendar('changeView', 'basicDay');
			
				var popup = document.getElementById("overlay");
				popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";
				
				document.getElementById("title").value = '';
				document.getElementById("start").value = date;
				document.getElementById("end").value = '';
				document.getElementById("eventId").value = '-1';

			}
		});
		
	});

</script>
<style type='text/css'>

	body 
	{
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	}

	#calendar 
	{
		width: 900px;
		margin: 0 auto;
	}
	
	#overlay 
	{
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
	}
	
	#overlay div 
	{
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

</style>
</head>
<body>
<h1> 345 Calendar </h1>
<div id='calendar'></div>
<div id="overlay">
     <div>
		<h2>Event</h2>
		<input type='hidden' value="-1" id='eventId' />
		<label for='title'>Title </label>
        <input type='text' id='title'/> <br />
		<label for='start'>Start </label>
        <input type='text' id='start'/> <br />
		<label for='end'>End </label>
        <input type='text' id='end'/> <br />
		<label for='Location'>Location </label>
        <input type='text' id='Location'/> <br />
		<input TYPE='button' OnClick="Save();" VALUE="Save" />
		<input TYPE='button' OnClick="Close();" VALUE="Close" />
		
     </div>
</div>
</body>
</html>
